import React, { Component } from 'react'
import PropTypes from 'prop-types';
export class Main extends Component {
    constructor(props) {
        super(props)

        this.state = {
            value: ''
        }
    }
    changeValue = (e) => {
        console.log(e.target.value);
        this.setState({
            value: e.target.value
        })
    }
    render() {

        const { list, add, remove, changeState, color } = this.props
        const { value } = this.state
        return (
            <div className='main'>
                <div className='add'>
                    <input
                        type="text"
                        value={value}
                        onChange={this.changeValue}
                    />
                    <button onClick={() => {
                        add(value)
                        this.setState({
                            value: ''
                        })
                    }}>添加</button>
                </div>
                <ul className='todoList'>
                    {
                        list.length ?
                            list.map((item) => {
                                return <li key={item.id}>
                                    <input
                                        type="checkbox"
                                        checked={item.state}
                                        onChange={() => {
                                            changeState(item.id)
                                        }}
                                    />
                                    <b>{item.title}</b>
                                    {item.state ?
                                        <button style={{ background: color }}>已完成</button> :
                                        <button>未完成</button>}
                                    <span onClick={() => {
                                        remove(item.id)
                                    }}>❌</span>
                                </li>
                            }) :'无数据'
                    }
                </ul>
            </div>
        )
    }
}

Main.propTypes = {
    list: PropTypes.array,
    add: PropTypes.func.isRequired,
    remove: PropTypes.func.isRequired,
    changeState: PropTypes.func.isRequired,
};

Main.defaultProps = {
    list: [],
    color: 'red'
};

export default Main